

import React from 'react';
import { Link } from 'umi';

import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Input, message, Card, Row, Col } from 'antd';

// import ProCard from '@ant-design/pro-card';


import ProForm, { ProFormText, ProFormDateRangePicker, ProFormUploadButton, ProFormRadio, ProFormDigit } from '@ant-design/pro-form';

const { Search } = Input;
const Category = () => {

    const test = (
        <span>
            无上级分类
        </span>
    )

    const size = 'sm';

    const header = {
        title: '添加分类',
        breadcrumb: {
            itemRender: (route, params, routes, paths) => {
                return (
                    <Link to={route.path}>{route.breadcrumbName}</Link>
                )
            },
            routes: [
                {
                    path: '',
                    breadcrumbName: '商品',
                },
                {
                    path: '/product/category',
                    breadcrumbName: '商品分类',
                },
                {
                    path: '',
                    breadcrumbName: '当前页面',
                },
            ],
        }
    }

    return (
        <PageContainer header={header}>
            <Card>
                <ProForm
                    submitter={{
                        render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
                    }}
                    labelCol={{ span: 12 }}
                    onFinish={(values) => console.log(values)}
                >

                    <ProFormText
                        width={size}
                        name="name"
                        label="分类名称"
                        tooltip="最长为 24 位"
                        placeholder="请输入分类名称"
                        rules={[{ required: true, message: '分类名称为必填项!' }]}
                    />

                    <ProFormDigit
                        label="排序"
                        placeholder='排序默认为0'
                        name="sort"
                        width={size} min={0} max={10}
                    />

                    <ProFormUploadButton
                        visible={true}
                        name="upload"
                        label="分类图标"
                        max={2}
                        fieldProps={{
                            name: 'file',
                            listType: 'picture-card',
                        }}
                        action="/upload.do"
                        extra=""
                    />
                </ProForm>
            </Card>

        </PageContainer>
    );
};

export default Category;
